<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表单基础应用</title>
  </head>
  <body>
    <!-- <form method="post"> -->
      <input type="text" id="txt" value="请输入用户名" maxlength="6" />
      <input type="text" id="toggle" value="禁止/取消" disabled />
      <button id="btn">提交</button>
      <button id="toggleBtn">禁止/取消禁止</button>
    <!-- </form> -->
    <script>
      //获取按钮
      var btn = getIdDom("btn");
      //按钮出发点击事件
      btn.onclick = function () {
        //e.preventDefault(); 阻止提交
        var txt = getIdDom("txt");
        //获取value值
        console.log(txt.value);
        //清空value
        txt.value = "";
        //获取焦点
        txt.focus();
      };

      /*
         禁止/取消禁止
      */
      let toggleBtn = getIdDom("toggleBtn");
      let toggle = getIdDom("toggle");
      toggleBtn.onclick = function () {
        toggle.disabled = !toggle.disabled;
      };

      //获取ID方法
      function getIdDom(d) {
        return document.getElementById(d);
      }
    </script>
  </body>
</html>
